﻿.articles-index {
    display: flex;
    justify-content: space-between;
    margin-bottom:30px;
}

    .articles-index .article-types {
        width: 140px;
    }

        .articles-index .article-types .item {
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
            border-radius: 5px;
            margin-top: 10px;
        }

            .articles-index .article-types .item:hover {
                color: white;
                background-color: #eb2030;
            }
            .articles-index .article-types .item:hover a {
                color: white;
            }

        .articles-index .article-types .item-active {
            color: white;
            background-color: #eb2030;
        }
            .articles-index .article-types .item-active a {
                color: white;
            }


    /*************8*/
    .articles-index .articles-content {
        width: 700px;
        margin-top: 10px;
    }
    .articles-index .more-articles {
        margin-top:30px;
        height:50px;
        line-height:50px;
        border:solid 1px #eee;
        text-align:center;
        cursor:pointer;
        font-weight:bold;
    }

    .articles-index .articles-list {
    }

        .articles-index .articles-list .article-list-item {
            display: flex;
            justify-content: space-between;
            border-bottom: solid 1px #eee;
            margin-top: 10px;
            padding-bottom: 10px;
            overflow: hidden;
        }

            .articles-index .articles-list .article-list-item .previe-img {
                width: 230px;
                height: 130px;
                border-radius: 5px;
            }

            .articles-index .articles-list .article-list-item .doc-info {
                padding-left: 10px;
                padding-right: 10px;
                width: 580px;
                height: 130px;
                overflow: hidden;
            }

            .articles-index .articles-list .article-list-item .doc-info2 {
                padding-left: 10px;
                padding-right: 10px;
                height: 130px;
                overflow: hidden;
            }

            .articles-index .articles-list .article-list-item .doc-info .title {
                font-size: 1.15rem;
                height: 26px;
                line-height: 26px;
                word-break: break-word;
            }
            .articles-index .articles-list .article-list-item .doc-info2 .title {
                font-size: 1.15rem;
                height: 26px;
                line-height: 26px;
                word-break: break-word;
            }

            .articles-index .articles-list .article-list-item .doc-info .author_info {
                font-size: 12px;
                color: gray;
                margin-top: 20px;
            }
            .articles-index .articles-list .article-list-item .doc-info2 .author_info {
                font-size: 12px;
                color: gray;
                margin-top: 20px;
            }

                .articles-index .articles-list .article-list-item .doc-info .author_info .source_img {
                    vertical-align:middle;
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                }

            .articles-index .articles-list .article-list-item .doc-info .author_info span {
                margin-right: 20px;
            }
            .articles-index .articles-list .article-list-item .doc-info2 .author_info span {
                margin-right: 20px;
            }

            .articles-index .articles-list .article-list-item .doc-info .summary {
                overflow: hidden;
                font-size: 0.8rem;
                margin-top: 20px;
                height: 45px;
                line-height: 25px;
                color: gray;
            }
            .articles-index .articles-list .article-list-item .doc-info2 .summary {
                overflow: hidden;
                font-size: 0.8rem;
                margin-top: 20px;
                height: 45px;
                line-height: 25px;
                color: gray;
            }



    /*************8*/
    .articles-index .article-index-ext {
        width: 345px;
    }
        .articles-index .article-index-ext .panel-name {
            font-size: 1.2em;
            font-weight: bold;
            border-bottom: dotted 1px #ddd;
            height: 50px;
            line-height: 50px;
            text-align: center
        }
        .articles-index .article-index-ext .sub-types-list {
            clear: both;
            margin-top: 20px;
            border-top: solid 3px #ccc;
            border-radius:5px;
            background-color: #fbfbfb;
            padding: 10px;
            display: inline-block;
            width: 325px;
        }
            .articles-index .article-index-ext .sub-types-list .sub-type {
                float: left;
                width: 100px;
                height: 40px;
                line-height: 40px;
                border-radius: 20px;
                border: solid 1px #fbfbfb;
                text-align: center;
                cursor: pointer;
                margin-top:10px;
            }
                .articles-index .article-index-ext .sub-types-list .sub-type:hover {
                    border: solid 1px orangered;
                }


            /**********/
        .articles-index .article-index-ext .hot-arts {
            margin-top: 20px;
            border-top: solid 3px red;
            background-color: #fbfbfb;
            padding: 20px;
            width: 305px;
        }
        .articles-index .article-index-ext .hot-arts .hot-list {
            clear: both;
            padding-top: 10px;
            padding-left: 10px;
        }

            .articles-index .article-index-ext .hot-arts .hot-list .hot-doc-item {
                line-height: 26px;
                display: flex;
                margin-bottom: 8px;
                justify-content: left;
                font-size: 0.9em;
            }

                .articles-index .article-index-ext .hot-arts .hot-list .hot-doc-item .num {
                    margin-top: 3px;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    margin-right: 8px;
                    color: white;
                    border-radius: 5px;
                    text-align: center;
                    background-color: red;
                }

                .articles-index .article-index-ext .hot-arts .hot-list .hot-doc-item .text {
                    width: 310px;
                    height: 26px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
